<!-- pages/collection/collection.vue -->
<template>
	<view class="collection-container">
		<view class="header">
			<text class="title">我的收藏</text>
			<text class="count">共 {{ collections.length }} 件</text>
		</view>
		
		<view class="items" v-if="collections.length > 0">
			<view v-for="(item, index) in collections" 
				  :key="index" 
				  class="item-card"
				  @tap="viewDetail(item.jbsId)">
				<view class="item-image-wrapper">
					<image class="item-image" 
						   :src="url+`${item.images?item.images.split(',')[0]:''}`"
						   mode="aspectFit"
						   style="width: 100%; height: 600rpx;"
                           @error="() => handleImageError(index)"/>
				</view>
				<view class="item-info">
					<text class="item-name">{{ item.name }}</text>
					<text class="item-desc">{{ item.description }}</text>
					<view class="item-footer">
						<text class="item-price">¥ {{ item.price }}</text>
						<button class="uncollect-btn" 
								@tap.stop="toggleCollect(item.id)">
							取消收藏
						</button>
					</view>
				</view>
			</view>
		</view>
		
		<view class="empty-state" v-else>
			<image src="/static/tab/logo.png" 
				   mode="aspectFit" 
				   class="empty-image"/>
			<text class="empty-text">暂无收藏内容</text>
		</view>
	</view>
</template>

<script>
import API from '@/api/config.js'

export default {
	data() {
		return {
      url:'http://localhost:8080/download/',
			collections: []
		}
	},
	methods: {
		async loadCollections() {
			try {
				console.log('开始加载收藏列表')
				uni.showLoading({ title: '加载中...' })
				const token = uni.getStorageSync('token')
				console.log('使用的token:', token)
				
				const res = await uni.request({
					url: API.USER_LIKES ,
					method: 'GET',
					header: {
						'Authorization': token
					}
				})
				
				console.log('收藏列表响应:', res)
				console.log('收藏列表数据:', res.data)

				if (res.data.code === 200) {
					const list = res.data.data || []
					console.log('原始列表数据:', list)
					
					this.collections = list.map(item => {
						console.log('处理列表项:', item)
						return {
							id: item.jbs.id,
              jbsId: item.jbsId,
							name: item.jbs?.title || '未命名剧本杀',
							description: item.jbs?.desc || '暂无描述',
							images: item.jbs?.images || '/static/default-dress.png',
							price: item.jbs?.price || '暂无价格',
							createTime: item.createTime
						}
					}).filter(item => item.id)
					
					console.log('处理后的收藏列表:', this.collections)
				} else if (res.data.code === 401) {
					uni.showModal({
						title: '提示',
						content: '登录已过期，请重新登录',
						showCancel: false,
						success: () => {
							uni.removeStorageSync('token')
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}
					})
				} else {
					throw new Error(res.data?.message || '加载失败')
				}
			} catch (err) {
				console.error('获取收藏列表失败:', err)
				uni.showToast({
					title: err.message || '加载失败',
					icon: 'none',
					duration: 2000
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		toggleCollect(id) {
			console.log('开始取消收藏，商品ID:', id)
			
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return
			}

			uni.showModal({
				title: '提示',
				content: '确定取消收藏吗？',
				success: (res) => {
					if (res.confirm) {
						console.log('确认取消收藏，请求URL:', API.USER_LIKE_DELETE + id)
						console.log('使用的token:', token)
						
						uni.request({
							url: API.USER_LIKE_DELETE + id,
							method: 'POST',
							header: {
								'Authorization': token
							},
							success: (res) => {
								console.log('取消收藏响应:', res)
								console.log('响应状态码:', res.statusCode)
								console.log('响应数据:', res.data)
								
								if (res.data.code === 200) {
									uni.showToast({
										title: '已取消收藏',
										icon: 'success'
									})
									this.loadCollections()
								} else if (res.data.code === 401) {
									console.log('登录已过期')
									uni.showModal({
										title: '提示',
										content: '登录已过期，请重新登录',
										showCancel: false,
										success: () => {
											uni.removeStorageSync('token')
											uni.redirectTo({
												url: '/pages/login/login'
											})
										}
									})
								} else {
									console.error('取消收藏失败:', res.data.message)
									uni.showToast({
										title: res.data.message || '操作失败',
										icon: 'none'
									})
								}
							},
							fail: (err) => {
								console.error('请求失败:', err)
								uni.showToast({
									title: '网络请求失败',
									icon: 'none'
								})
							}
						})
					} else {
						console.log('用户取消操作')
					}
				}
			})
		},
		
		viewDetail(id) {
			uni.navigateTo({
				url: `/pages/jbs-detail/jbs-detail?id=${id}`
			})
		},
		
		handleImageError(e) {
			console.error('图片加载失败:', e)
			// 可以设置一个默认图片
			e.target.src = '/static/default-empty.png'
		}
	},
	onShow() {
    this.url = API.BASE_URL_IMAGE
		this.loadCollections()
	}
}
</script>

<style>
.collection-container {
	min-height: 100vh;
	background-color: #1a1a1a;
	padding: 20rpx;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;
}

.title {
	font-size: 36rpx;
	color: #e0e0e0;
	font-weight: 500;
}

.count {
	font-size: 24rpx;
	color: #999;
}

.items {
	padding: 0 20rpx;
}

.item-card {
	background: #2c2c2c;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.item-image-wrapper {
	width: 100%;
	height: 600rpx;
	background: #333;
	background-color: #1a1a1a;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.item-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.item-info {
	padding: 30rpx;
}

.item-name {
	font-size: 32rpx;
	color: #e0e0e0;
	margin-bottom: 16rpx;
	font-weight: 500;
}

.item-desc {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 24rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.4;
}

.item-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16rpx;
}

.item-price {
	font-size: 36rpx;
	color: #e0b080;
	font-weight: 600;
}

.uncollect-btn {
	margin-right: 10rpx;
	background: #333;
	color: #e0e0e0;
	font-size: 26rpx;
	padding: 12rpx 32rpx;
	border-radius: 32rpx;
	border: 1px solid #444;
}

.uncollect-btn:active {
	opacity: 0.8;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
}

.empty-image {
	width: 300rpx;
	height: 300rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}
</style>